<template>
  <h2>MReadMoreBar</h2>
  <p>
    在ReadMore系列组件中属于基础组件。可以在此组件基础上增加数据显示条数的逻辑，即可达到分页效果。
  </p>

  <h3>MReadMoreBar 属性</h3>
  <table-info type="props" :data="propsTable"></table-info>

  <h3>案例</h3>
  <code-demo-mobile :code="htmlCode" :scriptCode="scriptCode">
    <m-read-more-bar :collapsed="collapsed" @click="collapsed = !collapsed"></m-read-more-bar>
  </code-demo-mobile>
</template>

<script setup>
import { ref } from 'vue'

const collapsed = ref(true)

// prettier-ignore
const propsTable = [
  { name: 'collapsed', desc: '是否已折叠，折叠状态箭头朝下', type: 'boolean', default: '', },
]

const htmlCode = `<m-read-more-bar :collapsed="collapsed" @click="collapsed = !collapsed"></m-read-more-bar>`

const scriptCode = `const collapsed = ref(true)`
</script>
